<template>
    <div>
      <div class="choose" @click="choose">
        <div>选择配送日期</div>
        <div>
          <span class="date">{{date}}</span>
          <svg class="right" aria-hidden="true">
            <use xlink:href="#icon-qb_gd"></use>
          </svg>
        </div>
      </div>
      <van-popup v-model="show" position="bottom">
        <van-picker
          show-toolbar
          title="选择配送日期"
          :columns="columns"
          @cancel="onCancel"
          @confirm="onConfirm"
        />
      </van-popup>
    </div>
</template>

<script type="text/ecmascript-6">
  import { Popup, Picker } from 'vant';
  import Vue from 'vue';
  Vue.use(Popup).use(Picker);
  export default {
    name: 'date',

    data () {
      return {
        show: false,
        columns: []
      };
    },
    props: {},
    created () {
    },
    mounted() {
      let date = new Date();
      let date2 = new Date();
      let alldate = [];
      for (let i = 0; i < 7; i++) {
        date2.setDate(date.getDate() + i);
        let dat = date2.getMonth() + 1 + '月' + date2.getDate() + '日';
        alldate.push(dat);
      }
      this.columns = alldate;
    },
    methods: {
      choose() {
        this.show = true;
      },
      onConfirm(value, index) {
        this.date = value;
        this.$store.commit('chooseDate', value);
        this.$store.commit('today', index);
        this.show = false;
      },
      onCancel() {
        this.show = false;
      }
    },
    computed: {
      date: {
        get: function () {
          return this.$store.state.sale.date;
        },
        set: function (value) {
          this.$store.state.sale.date = value;
        }
      }
    },
    watch: {
    }
  };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/stylus/main.styl"
  .choose
    background-color #fff
    margin 0 vw(15) vw(5)
    height vw(35)
    line-height vw(35)
    display flex
    font-size word14
    color #333
    border-radius vw(5)
    justify-content space-between
    align-items center
    padding 0 vw(10)
    .date
      color main-color
    .right
      width vw(6)
      height vw(10)
      fill #999
</style>
